<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@include file="vAcesso.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reserva</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
</style>
<link href="stylePrincipal.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript/jquery-1.8.1.js"></script>
</head>
<body>
	<div id="sessao">
		Usuário [ ${sessionScope.email} ] <a href="SairServlet"><img
			src="images/sair.png" alt="sair"></a> <br />
	</div>
	<div id="logo">
		<img alt="SRV" src="images/iconSrv.png">
	</div>

	<div id="tudo">

		<div id="menu">
			<div id="espande">
				<div class="info">
					<div class="item">
						<b>Minhas Reservas</b>
					</div>
					<div class="conteudo">
					<p><a href="#">Reserva1</a></p>
					<p><a href="#">Reserva2</a></p>
					<p><a href="#">Reserva3</a></p>
					<p><a href="#">Reserva4</a></p>
					</div>
				</div>
				<div class="info">
					<div class="item">
						<b>Efetuar Reservas</b>
					</div>
					<div class="conteudo">
						<p>
							<img src="images/iconBus.png"><a
								href="selecionaPoltronaBus.html"> Ônibus</a>
						</p>
						<p>
							<img src="images/iconPlane.png"><a
								href="selecionaPoltronaPlane.html"> Avião</a>
						</p>

					</div>
				</div>

			</div>


		</div>
	</div>
	<script>
		/* 
		Este é o script que faz o trabalho.		
		Pegando o click
		 */
		$(".info div:first-child").click(function() {

			/* pegando a div que será executado o efeito */
			var f = $(this).parent().children("div:last-child");

			/* apenas para mudar a imagem "setinha" */
			if (f.is(":hidden")) {
				$(this).css("background-image", "url('images/a.png')");
			} else {
				$(this).css("background-image", "url('images/b.png')");
			}

			/* executa o efeito */
			f.slideToggle("slow");

		});
	</script>
</body>
</html>